<template>
	<view>
		<view class="dz-from-bz">
			巡检点：{{siteInfo.title}}
		</view>
		<view class="dz-line"></view>
		<view class="dz-from-bz" style="padding-bottom:8px;">
			<view >问题描述</view>
			<view class="dz-from-bz-text" style="font-size: 15px;margin: 8px 0 11px;color: #717171;">
				{{siteInfo.content}}
			</view>
			<view class="dz-from-fj">
				<view v-for="(item,index) in imgArr" :key="index" class="dz-from-fj-edit">
					<image :src="item" class="dz-from-fj-img-img" @tap="previewImage(index,item,'imgArr')"></image>
				</view>
			</view>
		</view>
		<view class="dz-line"></view>
		<view v-if="siteInfo.can_repair == 1">
			<view class="dz-from-bz" style="padding-bottom:8px;">
				<view>维修说明</view>
				<view class="dz-from-bz-text" style="color: #717171;">
					<textarea v-model="repair_content" auto-height :placeholder= "placeholder" :disabled="!canEdit" />
					<view class="dz-from-fj">
						<view ref="input" class="input"></view>
						<fileUploader limitsize="10240" @get-img="getImg" v-if="canEdit"></fileUploader>
						<view v-else class="dz-from-fj-edit" v-for="(item,index) in repair_images" :key="index">
							<image :src="item" class="dz-from-fj-img-img" @tap="previewImage(index,item,'repair_images')"></image>
						</view>
					</view>
				</view>
			</view>
			<button @tap="submit" :loading="isSubmit" v-if="siteInfo.can_repair == 1 && canEdit" class="primary">立即提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isSubmit:false,
				placeholder:'请输入维修说明',
				canEdit:true,//是否有编辑的权限
				id: 0,
				siteInfo: {},
				imgArr: [],
				repair_content:'',
				repair_images:[],
			}
		},
		computed: {
			...mapState([
				"userInfo"
			]),
		},
		onLoad(opts) {
			if (opts && opts.id) {
				this.id = opts.id
				this.getOrderDetail()
			}
		},
		methods: {
			async submit(){
				if(this.repair_content == ''){
					uni.showToast({
						title:'请输入维修说明',
						icon:'none'
					})
					return
				}
				if(this.repair_images.length == 0){
					uni.showToast({
						title:'请上传图片',
						icon:'none'
					})
					return
				}
				// if(this.isSubmit) return
				// this.isSubmit = true
				let res = await this.$lib.$http.post({
					url:this.$lib.$urlMap.orderReapir,
					data:{
						id:this.id,
						repair_content:this.repair_content,
						repair_images:this.repair_images.join(',')
					},
					needLogin:true
				})
				if(res.code == 1){
					this.isSubmit = false
					uni.showToast({
						title:'提交成功'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				}else{
					this.isSubmit = false
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			async getOrderDetail() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.orderDetail,
					data: {
						id: this.id
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.siteInfo = res.data
					this.canEdit = res.data.can_repair == 1 && res.data.status ==1 ? true : false
					this.repair_content = res.data.repair_content != null && res.data.repair_content != '' ? res.data.repair_content : ''
					this.repair_images = res.data.repair_images != null && res.data.repair_images != '' ? res.data.repair_images.split(',') : ''
					this.imgArr = res.data.images != null && res.data.images != '' ? res.data.images.split(',') : ''
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			previewImage(index,src,type) {
				let that = this
				uni.previewImage({
					urls: that[type],
					current:index,
					longPressActions: {
						// itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getImg(data) {
			    this.repair_images = data
			},
		}
	}
</script>

<style>
	page{background: #f5f5f5;}
	.dz-from {
	    display: flex;
	    padding: 18px;
	    width: 90%;
	    margin: 0 auto;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 16px;
	}
	
	.dz-from-bz {
	    display: flex;
	    padding: 14px;
	    width: 90%;
	    margin: 0 auto;
	    align-items: flex-start;
	    flex-direction: column;
	    font-size: 16px;
		background: #fff;
	}
	
	.dz-from-time {
	    display: flex;
	    align-items: center;
	    font-size: 15px;
	}
	
	.dz-from-top .dz-from-time:first-child {
	    margin-bottom: 3px;
	}
	
	.dz-from .iconfont {
	    font-size: 18px;
	    color: #8d8d8d;
	    margin-right: 3px
	}
	
	.dz-line {
	    height: 10px;
	}
	
	.dz-from-column {
	    flex-direction: column;
	}
	
	.dz-from .dz-jcx {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 100%;
	    flex: 1;
	    margin-bottom: 18px;
	}
	
	.dz-from .dz-jcx:last-child {
	    margin-bottom: 0;
	}
	
	.dz-jcx-l {
	    flex: 1;
	    margin-right: 14px;
	    width: 70%;
	    display: flex;
	    align-items: center;
	}
	
	.dz-jcx-input {
	    display: block;
	    font-size: 16px;
	    line-height: 1.8em;
	    height: 1.8em;
	    min-height: 1.8em;
	    overflow: hidden;
	    width: 30%;
	    padding: 5px 9px;
	    border: solid 1px #d6d6d6;
	}
	.dz-from-jc-{
		width: 100%;
		margin-top: 14px;
	}
	.dz-from-jc {
	    display: flex;
		align-items: flex-start;
		flex-direction: column;
	    width: 100%;
	}
	
	.dz-from-button {
	    margin: 18px;
	    padding-bottom: 18px;
	}
	
	.dz-from-bz-text {
	    width: 100%
	}
	
	.dz-from-bz-text textarea {
	    padding: 12px 0;
	    width: 100%;
		font-size: 15px;
	}
	
	.dz-from-fj {
	    display: flex;
	    flex-wrap: wrap;
	}
	.dz-from-bz-flex{display:flex;flex-direction:column;align-items: self-start;width: 100%;}
	.dz-from-fj-edit {
	    width: 80px;
	    border: solid 1px #efefef;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    height: 80px;
	    color: #adadad;
	    font-size: 14px;
	    margin-right: 10px;
	    justify-content: center;
	    position: relative;
	    margin-bottom: 10px
	}
	
	.dz-from-fj-edit .iconfont {
	    font-size: 24px;
	    margin-bottom: 1px
	}
	
	.dz-from-fj-img-img {
	    width: 80px;
	    height: 80px;
	}
	
	.dz-from-jian {
	    position: absolute;
	    right: 2px;
	    top: 2px;
	}
	
	.dz-from-jian .iconfont {
	    color: rgb(255, 255, 255);
	    font-size: 11px;
	    transform: rotate(45deg);
	    border-radius: 50%;
	    padding: 3px;
	    background: rgb(68, 138, 255);
	}
	
	.shenpi-list-r {
	    color: #9f9f9f;
	    margin-left: 7px;
	}
	
	.dz-just {
	    justify-content: space-between;
	    width: 100%;
	}
	
	.dz-jcx-no {
	    background: #4d72ff;
	    color: #fff;
	    font-size: 12px;
	    width: 18px;
	    height: 18px;
	    border-radius: 2px;
	    text-align: center;
	    line-height: 18px;
	    margin-right: 6px;
	}
	
	.dz-wei {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 92%;
	    border: dashed 2px #e0e0e0;
	    padding: 11px;
	    margin-top: 14px;
	}
	
	.dz-wei .iconfont {
	    font-size: 21px;
	    margin-top: 4px;
	    margin-right: 1px;
	}
	.dz-jcx{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 100%;
	    flex: 1;
	    margin-bottom: 18px;
	}
	.primary{
	    background: #4d72ff!important;
	    box-shadow: 0 2px 11px rgb(0 56 216 / 15%);
	    color: #fff!important;
	    border-radius: 30px;
	    font-size: 17px;
	    padding: 2px;
	    width: 90%;
		margin-top: 18px;
		margin-bottom: 18px;
	}
</style>
